<template>
  <el-table 
    ref="multipleTableRef" 
    :data="tableData" 
    @selection-change="handleSelectionChange" 
    stripe 
    align="left"
    :default-sort="{ prop: 'date', order: 'descending' }" 
    style="width: 100%">

    <el-table-column type="selection" width="55" />
    <el-table-column prop="date" label="日期" sortable width="180" />
    <el-table-column prop="yuexian" label="越线" sortable width="180" />
    <el-table-column prop="ruqin" label="入侵" sortable width="180" />
    <el-table-column prop="juji" label="聚集" sortable width="180" />
    <el-table-column prop="paowu" label="高空抛物" sortable width="180" />
    <el-table-column prop="total" label="总报警数" sortable width="180" />
    <el-table-column prop="desc" label="备注" width="180" />
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="deleteRow(scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="removeSelect()" style="background: red, font-color: red">删除</el-button>
    <el-button @click="undoSelect()">取消</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios';

const base_url = "http://10.82.14.162:8000/szw/"
const tableData = ref([])
const multipleTableRef = ref()
const multipleSelection = ref([])

const removeSelect = () => {
  if (multipleSelection.value) {
    multipleSelection.value.forEach((row) => {
      console.log('row:', row)
      deleteRow(row)
    });
    getSzwData()
  }
}

const undoSelect = () => {
  multipleTableRef.value.clearSelection()
}

const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log('value:', multipleSelection.value[0])
}

const getSzwData = () => {
  axios.get(base_url).then(res => {
    // console.log('get:', res.data)
    tableData.value = res.data
  }).catch(err => {
    console.log(err);
  })
}

const deleteRow = (item) => {
  console.log('item:', item)
  axios.delete(item.url).then(() => {
    getSzwData()
  }).catch(err => {
    console.log(err);
  })
}

onMounted(() => {
  getSzwData();
})
</script>
